<template>
  <view class="flex-column flex-center" :class="[fixed?'tui-nodata-fixed':'']">
    <image v-if="imgUrl" :src="imgUrl" class="tui-tips-icon block" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}" />
    <view class="tui-tips-content">
      <slot />
    </view>
    <view v-if="btnText" class="flex-row flex-center" hover-class="tui-btn__hover" :hover-stay-time="70" :style="{width:btnWidth+'rpx',height:btnHeight+'rpx',background:backgroundColor,borderRadius:radius}" @tap="handleClick">
      <text :style="{fontSize:size+'rpx'}">{{ btnText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TuiNoData',
  props: {
    // 是否垂直居中
    fixed: {
      type: Boolean,
      default: true
    },
    // 图片地址，没有则不显示
    imgUrl: {
      type: String,
      default: ''
    },
    // 图片宽度
    imgWidth: {
      type: Number,
      default: 200
    },
    // 图片高度
    imgHeight: {
      type: Number,
      default: 200
    },
    // 按钮宽度
    btnWidth: {
      type: Number,
      default: 200
    },
    btnHeight: {
      type: Number,
      default: 60
    },
    // 按钮文字，没有则不显示
    btnText: {
      type: String,
      default: ''
    },
    // 按钮背景色
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    size: {
      type: Number,
      default: 28
    },
    radius: {
      type: String,
      default: '8rpx'
    }
  },
  methods: {
    handleClick(e) {
      this.$emit('click', {})
    }
  }
}
</script>

<style scoped>
	.tui-nodata-fixed {
		position: absolute;
    left:0;
    right:0;
    /*#ifndef APP-NVUE*/
		top: 50%;
		transform: translateY(-50%);
    /*#endif*/
    /*#ifdef APP-NVUE*/
    transform: translateY(50%);
    /*#endif*/
	}

	.tui-tips-icon {
    /*#ifndef APP-NVUE*/
		flex-shrink: 0;
    /*#endif*/
		width: 280rpx;
		height: 280rpx;
		margin-bottom: 30rpx;
	}

	.tui-tips-content {
		text-align: center;
		padding: 0 50rpx 28rpx 50rpx;
    /*#ifndef APP-NVUE*/
		box-sizing: border-box;
		word-break: break-all;
		word-wrap: break-word;
    /*#endif*/
	}

	.tui-tips-btn {
		color: #FFFFFF;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-btn__hover{
		opacity: 0.5;
	}

</style>
